import React, { useState, DragEvent } from 'react';
import { Sortable } from "./components/sortable/Sortable";


const widgetList = [
  {
    type: 'drag',
    name: 'Draggable',
    isRender: true,
    children: [],
  },
  {
    type: 'custom',
    name: 'TitleDesc',
  }
]

export default function Widgets (): any {
  const __onDragStart = (event: DragEvent <HTMLElement>, item: any) => {
    event.stopPropagation();

    console.log('__onDragStart: => ', event)
    event.dataTransfer.setData('drag:data', JSON.stringify({ data: item }));
  }

  return widgetList.map((item: any, index) => {
    return (
      <Sortable
        key={index}
        data={item}
        draggable={true}
        onDragStart={ev => __onDragStart(ev, item)}
      >
        <div className="drag-item">
          drag card
        </div>
      </Sortable>
    )
  })
}

